<template>
	<a-modal
		class="dispatch-area"
		:visible="visible"
		:confirm-loading="confirmLoading"
		:title="'添加区域'"
		ok-text="确认保存"
		:mask-closable="false"
		@cancel="onClose"
		@ok="handleSubmit"
	>
		<a-form-model
			ref="form"
			:label-col="labelCol"
			:wrapper-col="wrapperCol"
			:model="form"
			@submit="handleSubmit"
		>
			<a-button v-show="false" html-type="submit" />

			<!-- <a-form-model-item label="市场名称" prop="name" required>
				<a-input
					v-model="formInline.name"
					:max-length="32"
					placeholder="请输入名称"
				/>
			</a-form-model-item> -->

			<!-- <a-form-model-item label="状态">
				<a-select
					v-model="queryForm.status"
					placeholder="请选择状态"
					style="width: 200px"
					@change="statusChange"
					allowClear
				>
					<a-select-option
						v-for="(item, key, index) in statusMap"
						:value="key"
						:key="index"
					>
						{{ item.text }}
					</a-select-option>
				</a-select>
			</a-form-model-item> -->

			<!-- <a-form-model-item label="租户ID" prop="tenant_id">
				<a-input-number
					v-model="formInline.tenant_id"
					placeholder="请输入租户ID"
				/>
			</a-form-model-item> -->

			<!-- <a-form-model-item label="地址">
				<app-tree-select
					v-model="formInline.area_code"
					radio
					:code="$e.city"
					style="width: 100%"
					@change="(data) => (formInline.area_name = data.area_name_all)"
				/>
			</a-form-model-item> -->
			<!-- <a-form-model-item :wrapper-col="buttonCol" label="详细地址">
				<a-input
					v-model="formInline.address"
					:max-length="255"
					placeholder=""
				/>
			</a-form-model-item> -->

			<!-- <a-form-model-item label="描述">
				<a-textarea
					v-model="formInline.describe"
					style="margin-top: 10px"
					:auto-size="{ minRows: 3 }"
				/>
			</a-form-model-item> -->

			<!-- <a-form-model-item label="开业时间" v-if="flag">
				<a-time-picker
					@change="startTimeChange"
					:default-value="startDefaultTime"
					format="HH:mm"
				/>
			</a-form-model-item> -->

			<!-- <a-form-model-item label="结业时间" v-if="flag">
				<a-time-picker
					@change="endTimeChange"
					:default-value="endDefaultTime"
					format="HH:mm"
				/>
			</a-form-model-item> -->

			<!-- <a-form-model-item label="期望取货时间">
				<div class="expect-pickup-time">
					<a-input
						suffix="分钟"
						v-model="formInline.pickup_time"
						style="width: 120px; margin-right: 20px"
					/>
				</div>
			</a-form-model-item> -->

			<!-- <a-form-model-item label="准备时间">
				<div class="expect-pickup-time">
					<a-input
						suffix="分钟"
						v-model="formInline.prepare_time"
						style="width: 120px; margin-right: 20px"
					/>
				</div>
			</a-form-model-item> -->

			<a-form-model-item label="所属市场">
				<a-select
					v-model="form.market_id"
					style="width: 80%"
					@change="handleMarketChange"
					placeholder="请选择"
					allowClear
				>
					<a-select-option
						v-for="(item, index) in marketData"
						:key="index"
						:value="item.id"
					>
						{{ item.name }}
					</a-select-option>
				</a-select>
			</a-form-model-item>

			<a-form-model-item label="区域选择">
				<a-select
					placeholder="请选择"
					style="width: 80%"
					v-model="form.map_area_id"
					@change="handleAreaChange"
					allowClear
				>
					<a-select-option
						v-for="(item, index) in areaList"
						:key="index"
						:value="item.map_area_id"
					>
						{{ item.map_area_name }}
					</a-select-option>
				</a-select>
			</a-form-model-item>

			<!-- <a-form-model-item label="准备分段间隔">
				<a-select
					style="width: 120px"
					v-model="formInline.prepare_interval_time"
					@change="prepareIntervalChange"
				>
					<a-select-option value="20">20分钟 </a-select-option>
					<a-select-option value="30"> 30分钟 </a-select-option>
					<a-select-option value="60">60分钟</a-select-option>
				</a-select>
			</a-form-model-item> -->
		</a-form-model>
	</a-modal>
</template>

<script>
	import salemarket from "@/api/salemarket"
	import areaHttp from "@/api/area"
	import orderNewMerchant from "@/api/new_merchant"
	// import moment from "moment"
	export default {
		model: {
			//event:什么时候触发v-model行为
			event: "change-visible",
			// 定义传递给v-model的那个变量，绑定到哪个属性值上
			prop: "visible",
		},
		props: {
			visible: {
				type: Boolean,
				default: false,
			},
			item: {
				type: Object,
				default: () => {
					return {
						// id: 0,
						// status: 1,
					}
				},
			},
		},
		data() {
			// this.statusMap = {
			// 	1: {
			// 		status: "success",
			// 		text: "正常",
			// 	},
			// 	0: {
			// 		status: "default",
			// 		text: "停用",
			// 	},
			// 	"-1": {
			// 		status: "error",
			// 		text: "冻结",
			// 	},
			// }
			return {
				// rules: {
				// 	name: [{ required: true, trigger: "change", message: "市场名必填" }],
				// },
				// defaultTime: "",
				// endDefaultTime: "",
				// startDefaultTime: "",
				// value: null,
				// queryForm: {
				// 	// searchkey: "",
				// 	status: undefined, //placeholder 生效
				// },

				form: {
					id: "",
					market_id: undefined,
					map_area_id: undefined,
				},
				marketData: [],
				areaList: [],
				// buttonCol: { span: 18, offset: 4 },
				// buttonCol: { span: 18, offset: 0 },
				labelCol: { span: 5 },
				wrapperCol: { span: 18 },
				confirmLoading: false,

				// formInline: {
				// 	// ...this.item,
				// },
				// flag: true,
				// mapVisible: false,

				// uploadImageLoading: false,
			}
		},
		watch: {
			visible: function (showFlag) {
				if (showFlag === false) {
					this.resetFormFields()
					return
				}

				console.log(this.item)
				this.form.id = this.item.id
				this.form.market_id = this.item.market_id
				// 获取批发市场列表
				this.getMarketData()
				this.getAreaList(this.item.market_id)
				// this.formInline = {
				// 	status_flag: this.item.status == 1, // 默认正常
				// }

				// this.resetFormFields()
				// console.log(this.item)
				// for (let ii in this.item) {
				// 	this.$set(this.formInline, ii, this.item[ii])
				// }
				// if (this.item.id * 1 > 0) {
				// 	// 编辑
				// 	this.startDefaultTime = moment(this.formInline.start_time, "HH:mm")
				// 	this.endDefaultTime = moment(this.formInline.end_time, "HH:mm")
				// } else {
				// 	this.startDefaultTime = ""
				// 	this.endDefaultTime = ""
				// }

				// this.queryForm.status = this.item.status + ""
			},
		},
		created() {},
		mounted() {},
		methods: {
			resetFormFields() {
				this.form = {
					id: "",
					market_id: undefined,
					map_area_id: undefined,
				}
				this.marketData = []
				this.areaList = []
			},
			async getMarketData(params = {}) {
				// this.resetFormFields()
				this.marketData = []

				await salemarket.query(params).then((response) => {
					console.log("市场列表数据", response)
					if (response.code !== 1) {
						this.$message.warning(response.message)
						return
					}

					if (response.data && response.data.length > 0) {
						this.marketData = response.data.map((item) => {
							return {
								id: item.id,
								name: item.name,
							}
						})
					}
				})
			},
			// moment,
			// startTimeChange(time) {
			// 	console.log(time.format("HH:mm"))
			// 	this.formInline.start_time = time.format("HH:mm")
			// },
			// endTimeChange(time) {
			// 	console.log(time)
			// 	console.log(time.format("YYYY-MM-DD HH:mm:ss"))
			// 	console.log(time.format("HH:mm"))
			// 	this.formInline.end_time = time.format("HH:mm")
			// },
			handleAreaChange(value) {
				console.log(value)
				this.form.map_area_id = value
			},

			handleMarketChange(market_id) {
				console.log(`selected ${market_id}`)
				this.areaList = []
				this.form.map_area_id = undefined
				this.getAreaList(market_id)
			},
			async getAreaList(market_id) {
				console.log(market_id)

				await areaHttp
					.query({
						market_id,
					})
					.then((response) => {
						console.log("区域列表数据", response)
						if (response.code !== 1) {
							this.$message.warning(response.message)
							return
						}

						response.data.forEach((element) => {
							this.areaList.push({
								map_area_id: element.id,
								map_area_name: element.name,
							})
						})
					})
			},
			// prepareIntervalChange(value) {
			// 	console.log(value)
			// 	this.formInline.prepare_interval_time = value
			// },
			// statusChange(value) {
			// 	this.formInline.status = value
			// 	console.log(value)
			// },
			onClose() {
				this.$emit("change-visible", false)
			},
			// onChange() {
			// 	this.onClose()
			// 	this.$emit("change")
			// },
			// resetFormFields() {
			// 	this.formInline = {
			// 		// start_time: "",
			// 		// end_time: "",
			// 		// pickup_interval_time: "",
			// 		// prepare_interval_time: "",
			// 		status_flag: this.item.status == 1, // 默认正常
			// 	}
			// 	// 解决开业时间、结业时间输入框不清空问题
			// 	this.flag = false
			// 	setTimeout(() => {
			// 		this.flag = true
			// 	})
			// },
			async handleSubmit(e) {
				e.preventDefault()
				let flag = undefined
				this.$refs.form.validate((valid) => (flag = valid))
				if (!flag) {
					return
				}
				this.confirmLoading = true

				orderNewMerchant
					.update(this.form.id, {
						// id: this.form.id,
						map_area_id: this.form.map_area_id,
					})
					.then((res) => {
						this.confirmLoading = false
						if (res.code == 1) {
							this.$message.success("修改成功")
							this.$emit("handleOk")

							// setTimeout(() => {
							// 	this.visible = false
							// }, 500)
						}
					})
					.catch((e) => {
						this.confirmLoading = false
					})

				// this.formInline.status = this.formInline.status * 1
				// 编辑的保存
				// if (this.$func.isNumber(this.item.id) && this.item.id * 1 > 0) {
				// 	await salemarket
				// 		.update(this.item.id, this.formInline)
				// 		.then((response) => {
				// 			if (response.code !== 1) {
				// 				this.$message.error(response.message)
				// 				return
				// 			}
				// 			this.$message.success(response.message)
				// 			this.onChange()
				// 			return
				// 		})
				// 	this.confirmLoading = false
				// 	return
				// }
				// 新增的保存
				// await salemarket.create(this.formInline).then((response) => {
				// 	if (response.code !== 1) {
				// 		this.$message.error(response.message)
				// 		return
				// 	}
				// 	this.$message.success(response.message)
				// 	this.onChange()
				// 	this.resetFormFields()
				// 	return
				// })
			},
		},
	}
</script>

<style lang="less" type="text/less" >
	// .dispatch-area {
	// 	.ant-form-item {
	// 		margin-bottom: 6px;
	// 	}

	// 	.expect-pickup-time {
	// 		.ant-input {
	// 			padding-right: 40px !important;
	// 		}
	// 	}
	// }
</style>
